<template>
  <div class="container">
    <div class="flx-center" style="margin-bottom: 10px">
      <el-Button
        type="primary"
        :icon="Back"
        size="small"
        class="arrowBtn ctPrevious"
        aria-label="ctPrevious"
        @click="changeParamsIndex(-1)"
      />
      <div class="chartTitle" @click="handleChartClick">{{ params[currentParamsIndex].title }}</div>
      <el-Button
        type="primary"
        :icon="Right"
        size="small"
        class="arrowBtn ctNext"
        aria-label="ctNext"
        @click="changeParamsIndex(1)"
      />
    </div>
    <Swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="1"
      :space-between="50"
      :autoplay="autoplayConfig"
      @swiper="onSwiper"
      @slide-change="onSlideChange"
      :navigation="navigation"
      class="swiperBox"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <SwiperSlide v-for="(slide, slideIndex) in params" :key="slideIndex" style="width: 100%">
        <BarLineChart :data="slide.data" :legend-data="slide.legendData" :x-label="slide.xLabel" :rotate="slide.rotate" />
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
import { ref, computed, onMounted, watch } from "vue";
import BarLineChart from "@/components/ECharts/components/barLineChart.vue";
import { Right, Back } from "@element-plus/icons-vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import type { Swiper as SwiperType } from "swiper";
import "swiper/css";

interface SwiperInstance {
  slideTo: (index: number) => void;
  autoplay: {
    start: () => void;
    stop: () => void;
    running: boolean;
  };
  realIndex: number;
}

const params = [
  {
    title: "长沙故障压降情况概览",
    xLabel: ["小区退服压降", "olt压降", "传输压降"],
    legendData: ["目标值", "阶段值"],
    rotate: 0,
    data: [
      {
        name: "目标值",
        type: "bar",
        data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      },
      {
        name: "阶段值",
        type: "bar",
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
        color: ["rgba(0, 213, 255, 1)", "rgba(0, 213, 255, 0.3)"]
      }
    ]
  }
];

const emit = defineEmits(["clickEvent"]);
const currentParamsIndex = ref(0);
const swiperInstance = ref<SwiperInstance | any>(null);

const autoplayConfig = computed(() => ({
  delay: 4000,
  disableOnInteraction: true,
  pauseOnMouseEnter: true
}));

const changeParamsIndex = (step: number) => {
  currentParamsIndex.value = (currentParamsIndex.value + step + params.length) % params.length;
  if (swiperInstance.value) {
    swiperInstance.value.slideTo(currentParamsIndex.value);
    swiperInstance.value.autoplay.start();
  }
};

const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const navigation = ref({
  nextEl: ".ctNext",
  prevEl: ".ctPrevious"
});

const onSwiper = (swiper: SwiperType) => {
  swiperInstance.value = swiper as SwiperInstance;
  // 绑定鼠标事件
  swiperInstance.value.on("mouseenter", handleMouseEnter);
  swiperInstance.value.on("mouseleave", handleMouseLeave);
};
const onSlideChange = () => {
  if (swiperInstance.value) {
    currentParamsIndex.value = swiperInstance.value.realIndex;
    swiperInstance.value.autoplay.start();
  }
};

const handleMouseEnter = () => {
  if (swiperInstance.value && swiperInstance.value.autoplay) {
    swiperInstance.value.autoplay.stop();
  }
};

const handleMouseLeave = () => {
  if (swiperInstance.value && swiperInstance.value.autoplay) {
    swiperInstance.value.autoplay.start();
  }
};

onMounted(() => {
  if (swiperInstance.value) {
    swiperInstance.value.off("mouseenter", handleMouseEnter);
    swiperInstance.value.off("mouseleave", handleMouseLeave);
    swiperInstance.value.autoplay.start(); // 确保在组件卸载前重启轮播
  }
});

watch(currentParamsIndex, newIndex => {
  if (swiperInstance.value && swiperInstance.value.realIndex !== newIndex) {
    swiperInstance.value.slideTo(newIndex);
  }
});

const handleChartClick = () => {
  emit("clickEvent", params[currentParamsIndex.value].title);
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100%;
  .arrowBtn {
    position: absolute;
    box-sizing: border-box;
    width: 10px;
    height: 18px;
    color: #b1d8ff;
    background: rgb(102 226 251 / 8%);
    border: 1px solid rgb(18 142 255 / 40%);
    &.ant-btn-sm {
      border-radius: 0;
    }
  }
  .arrowBtn:hover {
    color: #00d5ff;
    background-color: rgb(102 226 251 / 30%);
  }
  .ctPrevious {
    left: 0;
  }
  .ctNext {
    right: 0;
  }
  .swiperBox {
    width: 100%;
    height: calc(100% - 40px);
  }
}
.swiper-button-prev,
.swiper-button-next {
  width: 1px;
  height: 1px;

  --swiper-navigation-size: 30px;
}
</style>
